<script setup>
import NavMenu from './navMenu.vue'
import {Expand,Fold,Edit} from '@element-plus/icons-vue'
import {ref,reactive} from 'vue'

const isCollapse=ref(false)
 //改变图标
function change() {
    isCollapse.value=!isCollapse.value
}

</script>

<template>
    <div class="common-layout">
      <el-container>
        <el-header>
          <div style="float:left">
                <el-icon v-if="!isCollapse" @click="change">
                    <Fold />
                </el-icon> 
                <el-icon v-else  @click="change">
                    <Expand />
                </el-icon> 
            </div>
        </el-header>
        <el-container>
            <NavMenu :isCollapse="isCollapse"></NavMenu>
          <!-- <el-aside width="200px">

            <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <span>Navigator Two</span>
            </el-menu-item>
          </el-aside> -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<style scoped>
.common-layout{
    background: white;
    width: 100%;
    height: 100%;
    border:1px solid red

}
</style>